<template>
  <basic-container>
    <div class="header">
      <!--日期与模板-->
      <div class="date-template">
        <div class="dt-item">
          <el-date-picker
            size="mini"
            v-model="queryDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </div>
        <div class="dt-item">
          <el-button size="mini" type="primary">切换日期样式</el-button>
        </div>
        <div class="dt-item">
          <el-radio-group v-model="currentTemplate" size="mini">
            <el-radio-button label="默认模板"></el-radio-button>
            <el-radio-button label="北京"></el-radio-button>
            <el-radio-button label="广州"></el-radio-button>
            <el-radio-button label="深圳"></el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <!--筛选条件-->
      <cs-filter-query :options="filterQueryOptions"></cs-filter-query>
    </div>
    <div class="data-report">
      <div class="curd-table">
        <div class="tab-header clearfix">
          <div class="tab-header-left">
          </div>
          <div class="tab-header-right">
            <el-tooltip class="item" effect="dark" content="刷新" placement="top">
              <el-button icon="el-icon-refresh" size="mini" circle></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="显隐" placement="top">
              <el-button icon="el-icon-s-operation" size="mini" circle @click="tableColumnDrawer = true"></el-button>
            </el-tooltip>
          </div>
        </div>
        <div class="table-body">
          <el-table
            v-loading="loading"
            :data="data"
            border
            show-summary
            :header-cell-style="iHeaderCellStyle"
            style="width: 100%">
            <el-table-column
              v-for="item in renderTableColumn"
              :key="item.value"
              :prop="item.value"
              :label="item.label"
              :sortable="item.sortable"
              :width="item.width?item.width:''">
              <template v-slot="{row}" v-if="item.value==='prop'">
                <el-tooltip effect="dark" :content="row.prop" placement="left">
                  <span class="over-flow">{{ row.prop }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="bottom-page clearfix">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.currentPage"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
      <el-drawer
        title="列显隐"
        size="40%"
        :visible.sync="tableColumnDrawer"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        :append-to-body="true"
        :wrapperClosable="false"
      >
        <el-divider></el-divider>
        <cs-drawer-container>
          <el-transfer
            filterable
            v-model="tableColumnValue"
            :data="tableColumnData"
            :titles="['隐藏', '显示']"
            :props="{key: 'value',label: 'label'}">
          </el-transfer>
        </cs-drawer-container>
      </el-drawer>
    </div>
  </basic-container>
</template>

<script>
import CsFilterQuery from "@/components/CsFilterQueryForApi/CsFilterQuery";
import baseQueryList from "@/mixins/base-query-list";
import CsDrawerContainer from "@/components/CsDrawerContainer/CsDrawerContainer";

export default {
  name: "test",
  mixins: [baseQueryList],
  components: {
    CsFilterQuery,
    CsDrawerContainer
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      // 查询日期范围
      queryDate: [],
      // 模板
      currentTemplate: '',
      loading: false,
      data: [],
      page: {
        currentPage: 1,
        pageSize: 10,
      },
      total: 0,
      // 显隐弹窗
      tableColumnDrawer: false,
      // 显隐已选择项
      tableColumnValue: [],
      // 显隐配置项
      tableColumnData: [],
    }
  },
  computed: {
    translateUserlist() {
      return this.userList.map(item => {
        return {
          label: item.realName,
          value: item.id
        }
      })
    },
    translatePlatformList() {
      return this.platformList.map(item => {
        return {
          label: item.dictValue,
          value: item.dictKey
        }
      })
    },
    translateOsList() {
      return this.osList.map(item => {
        return {
          label: item.dictValue,
          value: item.dictKey
        }
      })
    },
    translateOfferList() {
      return this.offerList.map(item => {
        return {
          label: item.name,
          value: item.id
        }
      })
    },
    filterQueryOptions() {
      return [{
        value: 'platform',
        label: '媒体',
        children: this.translatePlatformList
      }, {
        value: 'os',
        label: '系统',
        children: this.translateOsList
      }, {
        value: 'offerId',
        label: '订单',
      }, {
        value: 'customer',
        label: '用户',
      }, {
        value: 'account',
        label: '账户',
      }, {
        value: 'operator',
        label: '账户运营人',
      }, {
        value: 'salesManager',
        label: '销售经理',
      }, {
        value: 'customerManager',
        label: '客户经理',
      }]
    },
    renderTableColumn() {
      return this.tableColumnData.filter(item => this.tableColumnValue.includes(item.value))
    }
  },
  watch: {},
  methods: {
    iHeaderCellStyle() {
      return {
        color: '#101010',
        backgroundColor: '#F2F2F2'
      }
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.onLoad(this.page)
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.onLoad(this.page)
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  .date-template {
    .dt-item {
      display: inline-block;
      margin-bottom: 10px;
      margin-right: 10px;
    }
  }
}
.card-header {
  display: flex;
  justify-content: flex-end;
}

::v-deep .el-card__header {
  border-bottom: unset;
}

.curd-table {
  .tab-header {
    font-size: 14px;
    margin-bottom: 15px;

    .tab-header-left {
      float: left;

      & > * {
        margin-right: 15px;
      }
    }

    .tab-header-right {
      float: right;
    }
  }

  .bottom-page {
    margin-top: 15px;

    .el-pagination {
      float: right;
    }
  }
}

.el-transfer {
  height: 100%;
  display: -webkit-box;

  /deep/ .el-transfer-panel {
    height: 100%;

    .el-transfer-panel__body {
      height: 100%;

      .el-transfer-panel__list {
        height: 100%;
      }
    }
  }
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
</style>
